<template>
	<view class="container">
		<view class="content">
			<view class="title">
				注销账号有以下风险：
			</view>
			
			<view class="item">
				<view class="index">
					1.永久注销，无法登录
				</view>
				<view class="text">
					账号一经注销，无法登录(包括App、小程序登录等所有页面)。
				</view>
			</view>
			<view class="item">
				<view class="index">
					2.所有账号数据将无法被找回
				</view>
				<view class="text">
					注销账号后，原账号内的所有信息(包括订单、会员、活动等)、虚拟货币(包含心币等)、商品订单等无法再恢复。
				</view>
			</view>
		</view>
		
		
		<view class="b-btn">
			<button @click="isClick ? submit() : ''" :style="{backgroundColor:isClick ? '#FF4A4A' : '#EFEFEF',color:isClick? '#FFFFFF' : '##333333'}">已清除风险，发起注销<text v-if="!isClick">({{time}}s)</text></button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isClick:false,
				time:5
			};
		},
		onShow() {
			this.timeOut()
		},
		methods:{
			timeOut(){
				this.isClick = false
				this.time = 5
				let out = setInterval(()=>{
					if(this.time>0){
						this.time--
					}else{
						this.time=5
						this.isClick = true
						clearInterval(out)
					}
				},1000)
			},
			
			submit(){
				uni.navigateTo({
					url:'/pagesMine/system/clearAccount/clearAccount'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.container{
	padding: 0 34rpx;
	.content{
		.title{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 45rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			padding-top: 20rpx;
		}
		.item{
			margin-top: 30rpx;
			.index{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 10rpx;
			}
			.text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #777777;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
	}
	
	
	.b-btn{
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// right: 0;
		width: 100%;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 80rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);
		margin-top: 356rpx;
		// background-color: #ffffff;
		button{
			width: 100%;
			height: 96rpx;
			border-radius: 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			// color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin: 0 auto;
		}
	}
}
</style>
